<script lang="ts" setup>
import dayjs from 'dayjs'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useForm, useTable } from '@/hooks'
import { ArrangeTemplateApi } from '@/apis'

const emits = defineEmits(['select'])
const visible = ref<boolean>(false)

const { form, resetForm } = useForm<ArrangeTemplateApi.ArrangeTemplateQuery>({
  keyword: undefined,
  term: undefined,
  classYear: dayjs().year().toString(),
  grade: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
} = useTable(pagination => ArrangeTemplateApi.getArrangeTemplatePage({ ...form, ...pagination }), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '全称', dataIndex: 'fullName' },
  { title: '简称', dataIndex: 'name', width: 120 },
  { title: '年份', dataIndex: 'classYear', slotName: 'classYear' },
  { title: '课次', dataIndex: 'lessonCount', slotName: 'lessonCount', width: 60 },
  { title: '排课日期', dataIndex: 'lessonDate', slotName: 'lessonDate', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 100,
    fixed: 'right',
  },
]

const handleCancel = () => {
  visible.value = false
}

const open = () => {
  visible.value = true
  search()
}

const onSelect = (record) => {
  emits('select', record)
  visible.value = false
}

const refresh = () => {
  resetForm()
  search()
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal v-model:visible="visible" title="模板选择" width="900px" :footer="false" @cancel="handleCancel">
    <div class="h-45vh">
      <ProTable
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @refresh="refresh"
      >
        <template #toolbar-left>
          <a-space size="large">
            <a-year-picker v-model="form.classYear" style="width: 160px;" placeholder="年份" @change="search" />
            <DictSelect v-model="form.term" type="button" code="TermEnum" @change="search" />
            <DictSelect v-model="form.grade" code="Grade" style="width: 160px;" placeholder="年级" @change="search" />
          </a-space>
        </template>
        <template #classYear="{ record }">
          <div>
            {{ record.classYear }}年 · <DictLabel v-model="record.term" code="TermEnum" /> · <DictLabel v-model="record.grade" code="Grade" />
          </div>
        </template>
        <template #lessonCount="{ record }">
          <a-tag>
            {{ record.lessonCount }}次
          </a-tag>
        </template>
        <template #lessonDate="{ record }">
          <span>{{ record.startDate }} ~ {{ record.endDate }}</span>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-link @click="onSelect(record)">
              选择
            </a-link>
          </a-space>
        </template>
      </ProTable>
    </div>
  </a-modal>
</template>
